<template>
  <div class="earning_list">
    <div class="top_treadcrumb">
      <span class="title">收益总览</span>
    </div>
    <div class="overview">
      <el-card 
        shadow="never"
        v-for="(item, index) in cardList" :key="index"
      >
        <div class="card_item_title">
            {{ item.title }}
            <el-popover
              trigger="hover"
              placement="bottom"
              popper-class="dark_popover data_card_popover"
            >
              <div class="remark-content" v-html="item.remark"></div>
              <div slot="reference">
                <span><i class="iconfont el-icon-question"/></span>
              </div>
            </el-popover>
        </div>
        <div class="card_item_main">
          <span class="card_item_num">{{ item.value }}</span>
          <span class="card_item_unit">元</span>
        </div>
        <svg class="card_icon" aria-hidden="true">
          <use :xlink:href="`#${item.icon}`"></use>
        </svg>
      </el-card>
    </div>
    <div class="top_treadcrumb">
      <span class="title">结算明细</span>
    </div>
    <div class="earning_list_search">
      <div class="search_box">
        <span>结算时间</span>
        <el-date-picker
          v-model="featchData.dateTime1"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <span>结算周期</span>
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="searchData">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
    </div>
    <div class="earning_list_table">
      <page-table-new
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
      >
        <!-- 实际结算时间 -->
        <template #settleat="scope">
            <div>
                <span>{{ dateFormat(scope.row.settleat) }}</span>
            </div>
        </template>
        <!-- 结算周期 -->
        <template #attime="scope">
            <div>
                <span>{{ dateFormat(scope.row.startat,'yyyy-MM-dd') }} 至 {{ dateFormat(scope.row.endat,'yyyy-MM-dd') }}</span>
            </div>
        </template>
        <!-- 结算比例 -->
        <template #percent="scope">
            <div>
                <span>{{ scope.row.percent }}%</span>
            </div>
        </template>
        <template #remark="scope">
            <div class="action_column">
              <i
                v-if="scope.row.adjuestmoney !== null && scope.row.adjuestmoney !== ''"
                title="查看"
                class="iconfont icon-chakan"
                style="font-size: 18px;"
                @click="dialogDetile(scope.row)"
              ></i>
            </div>
        </template>
      </page-table-new>
    </div>
      <!-- 操作记录 -->
      <el-dialog
        title="结算备注"
        :visible.sync="dialogDetileVisible"
        width="670px"
      >
        <page-table-new
          :tableData="tableDataDetile"
          :tableColumns="tableColumnsDetile"
          :hasPage="false"
        >
          <!-- 结算时间 -->
          <template #settleat="scope">
              <div>
                  <span v-if="scope.row.settleat">{{ dateFormat(scope.row.settleat,'yyyy-MM-dd HH:mm:ss') }}</span>
                  <span v-else> - </span>
              </div>
          </template>
        </page-table-new>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogDetileVisible = false">关闭</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import { getAssistantSettlement,getPerSettleByPage } from "@/api/distrib";

import {  
    EARNING_TABLE_COLUMNS,
    DETILEEARNING_TABLE_COLUMNS
} from "../const";

import { formatDate } from "@/utils/validate";
import { getCookie } from "@/utils/auth";
export default {
  components: { pageTableNew },
  data() {
    return {
      roleType: getCookie("roleType"),
      cardList:[
        {
          "title":'历史收益',
          "name":'settlementmoney',
          "remark":"从第一次开始结算，到统计当日起所有已结算的收益",
          "icon":"icon-lishishouyi",
          "value":0
        },
        {
          "title":'可结算收益',
          "name":'cycleaboutmoney',
          "remark":"未达到结算日，不可结算的金额总和",
          "icon":"icon-yujishouyi",
          "value":0
        },
        {
          "title":'今日预计收益',
          "name":'todaymoney',
          "remark":"当日预计分成金额",
          "icon":"icon-jinriyujishouyi",
          "value":0
        },
        {
          "title":'可结算金额',
          "name":'cansettlementmoney',
          "remark":"已达到达到结算日，正在结算的金额总和",
          "icon":"icon-weijiesuanjine",
          "value":0
        },
      ],
      childRoleName:'',
      dialogDetileVisible:false,
      featchData: {
        pageSize: 20,
        pageStart: 1,
        sortBool:'',
        sortType:'',
        dateTime1:[],
        dateTime: [], //时间区间
      },
      tableData: [],
      tableColumns: EARNING_TABLE_COLUMNS,
      tableDataDetile:[],
      tableColumnsDetile:DETILEEARNING_TABLE_COLUMNS,
      total: 0,
    };
  },
  created() {
    this.getAssistant();
    this.searchData();
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd HH:mm:ss')
        }
      }
    }
  },
  methods: {
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        sortBool:'',
        sortType:'',
        dateTime1:[],
        dateTime: [], //时间区间
      };
      this.$nextTick(()=>{
        this.searchData();
      })
    },
    getAssistant(){
      getAssistantSettlement().then(res => {
        if(res.code === 0){
          this.cardList.forEach(item=>{
            switch(item.name){
              case 'settlementmoney':
                item.value = res.data.settlementmoney
              break;
              case 'cansettlementmoney':
                item.value = res.data.cansettlementmoney
              break;
              case 'todaymoney':
                item.value = res.data.todaymoney
              break;
              case 'cycleaboutmoney':
                item.value = res.data.cycleaboutmoney
              break;
            }
          })
        }else{
          this.$message.error(res.message);
        }
      })
    },
    searchData() {
      let params = {
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        sortBool:this.featchData.sortBool,
        sortType:this.featchData.sortType,
        cycleStartAt: this.featchData.dateTime[0]?new Date(this.featchData.dateTime[0]).getTime():'',
        cycleEndAt: this.featchData.dateTime[1]?new Date(this.featchData.dateTime[1]).getTime():'',
        startAt: this.featchData.dateTime1[0]?new Date(this.featchData.dateTime1[0]).getTime():'',
        endAt: this.featchData.dateTime1[1]?new Date(this.featchData.dateTime1[1]).getTime():'',
      };
      getPerSettleByPage(params).then(res => {
        if(res.code === 0){
          this.total = res.data.total;
          this.tableData = res.data.values;
        }else{
          this.$message.error(res.message);
        }
      });
    },
    handlePageChange(value) {
      this.featchData.pageSize = value.pageSize;
      this.featchData.pageStart = value.pageStart;
      this.searchData();
    },
    handleSortChange(data) {
      this.featchData.sortBool = data.sortBool?-1:1;
      this.featchData.sortType = data.sortType;
      this.searchData();
    },
    // 查看操作详情
    dialogDetile(row){
      this.tableDataDetile = [];
      this.tableDataDetile.push(row);
      this.dialogDetileVisible = true;
    },
  }
};
</script>

<style lang="scss" scoped>
.earning_list {
  .top_treadcrumb{
    margin-bottom: 16px;
    .title{
      font-size: 18px;
      font-weight: bold;
    }
  }
  .overview{
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;

    .el-card{
      width: 25%;
      margin-right: 16px;
      height: 106px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
      border-radius: 4px;
      .card_item_title {
        font-size: 14px;
        color: #0f0f0f;
        .el-popover__reference {
          display: inline-block;
        }
        .iconfont {
          font-size: 14px;
          color: #777;
        }
      }
      &:last-child{
        margin-right: 0;
      }
    }
    .card_item_main {
      // margin: 14px 0;
      .card_item_num {
        font-size: 42px;
        color: #2e2e36;
      }
      .card_item_unit{
        font-weight: bold;
      }
    }
    .card_icon {
      position: absolute;
      right: -20px;
      bottom: -25px;
      width: 125px;
      height: 100px;
      opacity: 0.5;
    }
  }
  .earning_list_search {
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .total_data {
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 22px;
    height: 22px;
    box-sizing: border-box;
    .data_label {
      font-family: PingFangSC-Semibold;
      color: #404040;
      font-weight: 600;
    }
    .custom_text {
      font-family: PingFangSC-Regular;
      color: #404040;
    }
    .num_data {
      font-weight: 600;
    }
  }
  .earning_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .status_tag {
      display: inline-block;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #cf0d17;
      margin-right: 6px;
      position: relative;
      top: -2px;
    }
    .red_button {
      margin-left: 4px;
    }
    .table_btn {
      display: inline-block;
      box-sizing: border-box;
      height: 22px;
      line-height: 20px;
      width: 40px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #06367c;
      color: #06367c;
      cursor: pointer;
    }
    .el-button--default:hover{
      color: #0266CC;
      border-color: #0266CC;
      background: #ffffff;
    }
    .action_column {
      i {
        color: var(--themeColor);
        margin-right: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>
